<template>
  <div class="list">
            <!-- 弹性布局列表盒子 -->
            <div class="list-box">
                <div class="list-page">
                    <a class="list-box" v-for="(v,index) in listArr" :key="index">
                        <img :src="v.src">
                        <p>{{v.p}}</p>
                    </a>
                </div>
                <div class="list-page">
                    <a class="list-box" v-for="(v,index) in  listArr2" :key="index">
                        <img :src="v.src">
                        <p>{{v.p}}</p>
                    </a>
                </div>
            </div>
            <!-- 小圆点 -->
            <ul>
                <li :class="listArr.length-1==myIndex?'liBgc':''"></li>
                <li :class="listArr.length-1!=myIndex?'liBgc':''"></li>
            </ul>
        </div>
</template>

<script>
export default {
    data(){
        return{
            listArr:[
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png',
                    p:'京东超市'
                },
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png',
                    p:'数码电器'
                },
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png',
                    p:'京东新百货'
                },
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png',
                    p:'京东生鲜'
                },
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png',
                    p:'京东到家'
                },
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png',
                    p:'充值缴费'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png',
                    p:'附近好店'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png',
                    p:'领券'
                },
                {
                    src:'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png',
                    p:'PLUS会员'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png',
                    p:'京东国际'
                }

            ],
             //种类列表页面2数组
             listArr2:[
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png',
                    p:'京东拍卖'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png',
                    p:'玩3c'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/185282/10/13877/6658/60ec1404E0fc4061a/a7c213f76e37a8d6.png',
                    p:'沃尔玛'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png',
                    p:'美妆馆'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png',
                    p:'京东旅行'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png',
                    p:'拍拍二手'
                },
                {
                    src:'//m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png',
                    p:'全部'
                },
             ],
        }
    }
}
</script>

<style scoped>
    .list {
        width: 93.33333333vw;
        height: 46.13333333vw;
        padding: 4vw 2.66666667vw;
        position: relative;
    }
    .list-box {
        width: 92.8vw;
        height: 46.66666667vw;
        display: flex;
        overflow: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
  
    .list .list-page {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .list a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 20%;
        height: 50%;
    }
        .list img {
        width: 10.13333333vw;
        height: 10.13333333vw;
    }
        .list p {
        color: #666666;
        font-size: 3.06666667vw;
    }
        .list ul {
        position: absolute;
        right: 47%;
        bottom: 1.33333333vw;
        display: flex;
    }
    .list ul li {
        border-radius: 50%;
        border: 1px solid #757575;
        height: 1.33333333vw;
        width: 1.33333333vw;
        margin-right: 1.33333333vw;
        opacity: 0.7;
        z-index: 999;
    }
</style>